<template>
	<div class="container-full">
		<!-- <div class="page-top" v-if="this.$store.state.options.user.oda.notice != null">
			<dl class="notice">
				<dt><img src="../../../static/images/notice-red-mini.png" /></dt>
				<dd @click="$router.push('/public/message-detail?id=' + $store.state.options.user.oda.notice.id)">{{ $store.state.options.user.oda.notice.title }}
				</dd>
			</dl>
		</div> -->
		<div class="order-list-contianer">
			<ul>
				<li :class="{'active': tabs.main == 0}" @click="tabs.main = 0">门店订单</li>
				<li :class="{'active': tabs.main == 1}" @click="tabs.main = 1">业务员订单</li>
			</ul>
		</div>
		<van-tabs v-show="tabs.main == 0" v-model="oneIndex" color="#00CC00" class="order-list-items">
			<van-tab title="待收取">
				<van-list v-model="dataset[0].collect.loading" :finished="dataset[0].collect.finished" finished-text="没有更多了" @load="onLoad(dataset[0].collect.textType)">
					<normal-order-list v-for="(item, index) in dataset[0].collect.dataset" :key="index" :ibase="item.base" :dataset="item.items" :textType="dataset[0].collect.textType" class="el-item" />
				</van-list>
			</van-tab>
			<van-tab title="待确认">
				<van-list v-model="dataset[0].confirm.loading" :finished="dataset[0].confirm.finished" finished-text="没有更多了" @load="onLoad(dataset[0].confirm.textType)">
					<normal-order-list v-for="(item, index) in dataset[0].confirm.dataset" :key="index" @onDelete="eventOnDeleteOrderItem(index)" :ibase="item.base" :dataset="item.items" :textType="dataset[0].confirm.textType" class="el-item" />
				</van-list>
			</van-tab>
			<van-tab title="已完成">
				<van-list v-model="dataset[0].complete.loading" :finished="dataset[0].complete.finished" finished-text="没有更多了" @load="onLoad(dataset[0].complete.textType)">
					<normal-order-list v-for="(item, index) in dataset[0].complete.dataset" :key="index" :ibase="item.base" :dataset="item.items" :textType="dataset[0].complete.textType" class="el-item" />
				</van-list>
			</van-tab>
		</van-tabs>
		<van-tabs v-if="tabs.main == 1" v-model="twoIndex" color="#00CC00" class="order-list-items">
			<van-tab title="待收取">
				<van-list v-model="dataset[1].collect.loading" :finished="dataset[1].collect.finished" finished-text="没有更多了" @load="onLoad(dataset[1].collect.textType)">
					<normal-order-list v-for="(item, index) in dataset[1].collect.dataset" :key="index" :ibase="item.base" :dataset="item.items" :textType="dataset[1].collect.textType" class="el-item" />
				</van-list>
			</van-tab>
			<van-tab title="待确认">
				<van-list v-model="dataset[1].confirm.loading" :finished="dataset[1].confirm.finished" finished-text="没有更多了" @load="onLoad(dataset[1].confirm.textType)">
					<normal-order-list v-for="(item, index) in dataset[1].confirm.dataset" :key="index" @onDelete="eventOnDeleteOrderItem(index)" :ibase="item.base" :dataset="item.items" :textType="dataset[1].confirm.textType" class="el-item" />
				</van-list>
			</van-tab>
			<van-tab title="已完成">
				<van-list v-model="dataset[1].complete.loading" :finished="dataset[1].complete.finished" finished-text="没有更多了" @load="onLoad(dataset[1].complete.textType)">
					<normal-order-list v-for="(item, index) in dataset[1].complete.dataset" :key="index" :ibase="item.base" :dataset="item.items" :textType="dataset[1].complete.textType" class="el-item" />
				</van-list>
			</van-tab>
		</van-tabs>
		<tab-group :dataset="navButtonGroup" index="0"></tab-group>
	</div>
</template>

<script>
	import { Cell, CellGroup, Tab, Tabs, List } from 'vant';

	import NormalOrderList from '../../components/currency/order-item/normal-list-temporary-director.vue';
	import TabGroup from "../../components/currency/tab/tab.vue";

	export default {
		name: 'TemporaryDirectorIndex',
		components: {
			[Cell.name]: Cell, [CellGroup.name]: CellGroup,
			[Tab.name]: Tab, [Tabs.name]: Tabs, [List.name]: List,
			NormalOrderList, TabGroup
		},
		data() {
			return {
				navButtonGroup: [
					{
						name: "订单", route: { path: '/temporaryDirector/index' }
					},
					{
						name: "待取点", route: { path: '/temporaryDirector/waiting-point-map' }
					},
					{
						name: "查询报价", route: { path: '/temporaryDirector/enquiry-quotation' }
					},
					{
						name: "个人中心", route: { path: '/temporaryDirector/temporary-center' }
					}
				],
				oneIndex: 0, twoIndex: 0,
				tabs: {
					main: 0,
					one: 0, two: 0
				},
				dataset: [
					{
						collect: {
							page: 0, limit: 10,
							loading: false, finished: false,
							textType: 'collect',
							dataset: []
						},
						confirm: {
							page: 0, limit: 10,
							loading: false, finished: false,
							textType: 'confirm',
							dataset: []
						},
						complete: {
							page: 0, limit: 10,
							loading: false, finished: false,
							textType: 'complete',
							dataset: []
						}
					},
					{
						collect: {
							page: 0, limit: 10,
							loading: false, finished: false,
							textType: 'collect',
							dataset: []
						},
						confirm: {
							page: 0, limit: 10,
							loading: false, finished: false,
							textType: 'confirm',
							dataset: []
						},
						complete: {
							page: 0, limit: 10,
							loading: false, finished: false,
							textType: 'complete',
							dataset: []
						}
					}
				]
			}
		},
		methods: {
			getOrderList(items) {
				var that = this, status = '';
				switch (items.textType) {
					case 'collect':
						status = 1;
						break;
					case 'confirm':
						status = Boolean(this.tabs.main) ? 2 : 4;
						break;
					case 'complete':
						status = 5;
						break;
				}
				var url = '/api/home/order/getlist',
					params = {
						page: items.page,
						list_rows: items.limit,
						status: status,
						token: that.$store.state.options.user.token
					},
					detail = [];
				if (this.tabs.main == 0) {
					params.shop_id = '';
				} else {
					params.salesman_id = '';
				}
				this.$util.postRequestInterface(url, params, (res) => {
					items.page = items.page + 1;
					if (res.data == '') {
						items.loading = false;
						items.finished = true;
					} else {
						for (let i of res.data.data) {
							for (let x of i.detail) {
								detail.push({
									title: x.garbagename,
									// number: x.weighting_method == 1 ? x.weighting_num : '',
									// weight: x.weighting_method == 0 ? x.weighting_num : '',
									number: x.weighting_num,
									unit: x.danweiming,
									time: that.$moment(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
								});
							}
							items.dataset.push({
								base: {
									number: i.ordernumber,
									amount: i.price,
									name: i.username,
									time: that.$moment(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
									id: i.id
								},
								items: detail
							});
							detail = [];
						}
						// // 加载状态结束
						items.loading = false;
						// // 数据全部加载完成
						if (items.dataset.length >= res.data.count) {
							items.finished = true;
						}
					}
				});
			},
			onLoad(textType) {
				var index = this.tabs.main;
				switch (textType) {
					case 'collect':
						this.getOrderList(this.dataset[index].collect);
						break;
					case 'confirm':
						this.getOrderList(this.dataset[index].confirm);
						break;
					case 'complete':
						this.getOrderList(this.dataset[index].complete);
						break;
				}
			},
			eventOnDeleteOrderItem(indexy) {
				var index = this.tabs.main;
				this.dataset[index].confirm.dataset.splice(indexy, 1);
			}
		}
	}
</script>

<style lang = "scss" scoped>
	.page-top {
		width: 100%;
		height: 3rem;
		position: relative;

		.notice {
			position: absolute;
			top: 0rem;
			width: 100%;
			margin: 0rem;
			padding: 0.7rem 1rem;
			display: flex;
			background: rgba(255, 247, 209, 1);
			z-index: 1;
			box-sizing: border-box;

			dt {
				padding-right: 1rem;

				img {
					width: 1.4rem;
				}
			}

			dd {
				white-space: nowrap;
				flex: 1;
				margin: 0rem;
				padding: 0rem;
				color: #ff9000;
				font-size: 1.3rem;
			}
		}
	}

	.order-list-items {
		position: relative;
		margin-bottom: 4rem;

		.el-item {
			padding: 0.5rem 1rem;
		}
	}

	.order-list-contianer {
		border-bottom: 0.4rem solid #f4f4f4;

		ul {
			display: flex;
			border-bottom: 0.1rem solid #00cc00;

			li {
				padding: 1rem 0rem;
			}
		}

		ul li {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;

			color: #999999;
			font-size: 1.7rem;
		}

		.active {
			background-color: #00cc00;
			color: #ffffff;
			font-weight: 540;
		}
	}
</style>
